<template>
  <div class="main" :style="style">
    <div class="main-title">
      <slot :text="scope" name="title">
        <div class="title">{{ title }}</div>
      </slot>
    </div>

    <div class="content">
      <slot :text="scope" name="content">暂无数据</slot>
    </div>
  </div>
</template>
<script setup>
defineProps({
  style: {
    type: String,
    required: false,
    default: "",
  },
  scope: {
    type: Object,
    default: { title: "默认标题" }
  },
  title: {
    type: String,
    default: "标题"
  }
});
// console.log("这是子组件的 setup")

// onMounted(() => {
//   console.log("这是子组件的 mounted")
// })
// onBeforeMount(() => {
//   console.log("这是子组件的 onBeforeMount")
// })
</script>
<style scoped>
.main {
  color: #FFF;
  width: 100%;
  display: block;
}

.main-title {
  width: 100%;
}

.title {
  padding: 5px;
  text-align: center;
}

.content {
  width: 100%;
  padding: 5px;
}
</style>
